<template>
    <div id="app">
      <div id="searchConditions">
            <el-row :gutter="20">
	            <el-col :span="6">
	            	<el-select v-model="t.campus_code" placeholder="请选择校区" @change="selectCampus">
	                	<el-option v-for="option in campusOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
	              </el-select>
	            </el-col>
	            <el-col :span="6">
	            	<el-select v-model="t.house_code" placeholder="请选择教学楼" @change="selectHouse">
	                	<el-option v-for="option in houseOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
	                </el-select>
	            </el-col>
              <el-col :span="6">
	            	<el-select v-model="t.floor" placeholder="请选择楼层">
	                	<el-option v-for="option in floorOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
	              </el-select>
	            </el-col>
	        </el-row>
	     <br>
        <el-row style="text-align: center;margin-top:20px;">
            <el-col :span="24" size="large">
                <el-button @click="search" type="primary" size="large ">查询</el-button>
            </el-col>
        </el-row>
    </div>
    <div style="padding: 20px;text-align: left">
        <el-button-group>
          <el-button type="primary" :loading="loading" @click="SynClassroom">同步教室资源信息</el-button>
        </el-button-group>
    </div>
        <el-table :data="classroom.item" v-loading="loading2"
          style="width:100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="CAMPUS_NAME" align="center" label="校区">
            </el-table-column>
            <el-table-column prop="HOUSE_NAME" align="center" label="教学楼">
            </el-table-column>
            <el-table-column prop="ROOM_NAME" align="center" label="教室">
            </el-table-column>
            <el-table-column prop="CLASSROOM_TYPE_NAME" align="center" label="教室类别">
            </el-table-column>
            <el-table-column prop="SEAT_AMT" align="center" label="座位数">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="classroom.pageNumber"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="classroom.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="classroom.total">
        </el-pagination>
    </div>
</template>
<script>
    import { getClassroom, getClassroomWithFilter, synClassrooms, getHouse, getFloor } from '@/api/basicInfoSetting'
    import _ from 'lodash'
    export default {
      name: 'classroomrSetting',
      data() {
        return {
          classroom: {
            total: 0,
            pageNumber: 1,
            pageSize: 20,
            item: []
          },
          loading: false,
          loading2: false,
          multipleSelection: [],
          uploadTip: '点击上传',
          uploadData: {
            filename: 'customer.xls'
          },
          processing: false,
          name: 'import',
          currentPageNumber: 1,
          t: {
            campus_code: '',
            house_code: '',
            floor: ''
          },
          campusOptions: [{ value: '', label: '校区:全部' }, { value: '1', label: '国定路校区' },
            { value: '2', label: '武川路校区' },
            { value: '3', label: '中山北一路校区' },
            { value: '4', label: '武东路校区' }
          ],
          houseOptions: [{ value: '', label: '教学楼:全部' }],
          floorOptions: [{ value: '', label: '楼层:全部' }]

        }
      },
      mounted: function() {
        this.loading2 = true
        const param = {
          'pageSize': this.classroom.pageSize,
          'pageNumber': this.classroom.pageNumber
        }
        getClassroom(param.pageSize, param.pageNumber).then(response => {
          const data = response.result
          // console.log(data)
          this.classroom.item = data
          this.classroom.total = response.totalRows
          this.loading2 = false
        }).catch(error => {
          this.loading2 = false
          console.log(error)
        })
      },
      methods: {
        handleSizeChange: function(val) {
          this.loading2 = true
          const param = {
            'pageSize': val,
            'pageNumber': this.classroom.pageNumber,
            'campus_code': this.t.campus_code,
            'house_code': this.t.house_code,
            'floor': this.t.floor
          }
          getClassroomWithFilter(param.pageSize, param.pageNumber, param.campus_code, param.house_code, param.floor).then(response => {
            const data = response.result
            // console.log(data)
            this.classroom.item = data
            this.classroom.total = response.totalRows
            this.loading2 = false
          }).catch(error => {
            this.loading2 = false
            console.log(error)
          })
        },
        handleCurrentChange: function(val) {
          this.loading2 = true
          this.currentPageNumber = val
          const param = {
            'pageSize': this.classroom.pageSize,
            'pageNumber': val,
            'campus_code': this.t.campus_code,
            'house_code': this.t.house_code,
            'floor': this.t.floor
          }
          // console.log(this.teachers.pageSize)
          getClassroomWithFilter(param.pageSize, param.pageNumber, param.campus_code, param.house_code, param.floor).then(response => {
            const data = response.result
            // console.log(data)
            this.classroom.item = data
            this.classroom.total = response.totalRows
            this.classroom.pageNumber = val
            this.classroom.pageSize = param.pageSize
            this.loading2 = false
          }).catch(error => {
            this.loading2 = false
            console.log(error)
          })
        },
        handleSelectionChange: function(val) {
          const that = this
          that.multipleSelection = []
          _.each(val, function(value, key) {
            // ids += value.CODE + ','
            that.multipleSelection.push(value.CODE)
            that.id = value.ID
            that.tt.code = value.CODE
            that.tt.name = value.NAME
            that.gender = 1
            // console.log(value)
          })
          // this.multipleSelection = ids
        },
        search: function() {
          this.loading2 = true
          const param = {
            'pageSize': 20,
            'pageNumber': 1,
            'campus_code': this.t.campus_code,
            'house_code': this.t.house_code,
            'floor': this.t.floor
          }
          this.currentPageNumber = 1
          getClassroomWithFilter(param.pageSize, param.pageNumber, param.campus_code, param.house_code, param.floor).then(response => {
            const data = response.result
            this.classroom.item = data
            this.classroom.total = response.totalRows
            this.classroom.pageNumber = 1
            this.classroom.pageSize = 20
            _.each(data, function(value) {
              value.checked = false
            })
            this.loading2 = false
          }).catch(error => {
            this.loading2 = false
            console.log(error)
          })
        },
        SynClassroom: function() {
          const that = this
          that.loading = true
          synClassrooms().then(response => {
            that.loading = false
            that.$message({
              message: response.message + ' 新增考场资源：' + response.insertRows + '个',
              type: 'success',
              duration: 5000
            })
            this.refetchCurrentPage()
          }).catch(error => {
            that.loading = false
            console.log(error)
            that.$message({
              message: '数据同步失败',
              type: 'error',
              duration: 3000
            })
          })
        },
        refetchCurrentPage: function() {
          this.loading2 = true
          const param = {
            'pageSize': this.classroom.pageSize,
            'pageNumber': this.currentPageNumber,
            'campus_code': this.t.campus_code,
            'house_code': this.t.house_code,
            'floor': this.t.floor
          }
          getClassroomWithFilter(param.pageSize, param.pageNumber, param.campus_code, param.house_code, param.floor).then(response => {
            const data = response.result
            // console.log(data)
            this.classroom.item = data
            this.classroom.total = response.totalRows
            _.each(data, function(value) {
              value.checked = false
            })
            this.loading2 = false
          }).catch(error => {
            this.loading = false
            console.log(error)
          })
        },
        selectCampus: function(ele) {
          if (ele !== '') {
            const param = {
              'campus_code': ele
            }
            getHouse(param.campus_code).then(response => {
              const data = response.result
              if (data.length > 0) {
                this.houseOptions = [{ value: '', label: '教学楼:全部' }]
                for (let i = 0; i < data.length; i++) {
                  this.houseOptions.push({ value: data[i]['VALUE'], label: data[i]['LABEL'] })
                }
                this.t.house_code = ''
                this.t.floor = ''
                console.log(this.houseOptions)
              } else {
                this.houseOptions = [{ value: '', label: '教学楼:全部' }]
                this.floorOptions = [{ value: '', label: '楼层:全部' }]
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            this.t.house_code = ''
            this.t.floor = ''
            this.houseOptions = [{ value: '', label: '教学楼:全部' }]
            this.floorOptions = [{ value: '', label: '楼层:全部' }]
          }
        },
        selectHouse: function(ele) {
          if (ele !== '') {
            const param = {
              'house_code': ele
            }
            getFloor(param.house_code).then(response => {
              const data = response.result
              if (data.length > 0) {
                this.floorOptions = [{ value: '', label: '楼层:全部' }]
                for (let i = 0; i < data.length; i++) {
                  this.floorOptions.push({ value: data[i]['VALUE'], label: data[i]['LABEL'] })
                }
                this.t.floor = ''
              } else {
                this.floorOptions = [{ value: '', label: '楼层:全部' }]
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            this.t.floor = ''
            this.floorOptions = [{ value: '', label: '楼层:全部' }]
          }
        }
      }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app {
        margin: 50px;
    }
  #searchConditions{
        border:1px solid;
        padding:10px;
    }
  table {
        font-size:12px;
        line-height:10px;
    }
  .upload {
        border:1px solid;
        margin:50px;
        padding:20px;
    }
</style>

<style rel="stylesheet/scss" lang="scss">
 a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
</style>